<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" height="150px" class="info">
          <img :src="data.picpath" />
        </el-aside>
        <el-container>
          <el-header height="150px">
            <el-card>
              <el-row :gutter="20" class="header">
                <el-col :span="7">
                  <h1>{{ route.query.officename }}</h1>
                </el-col>
                <el-button
                  type="primary"
                  @click="handleClick1()"
                  style="margin-left: 300px"
                  >修改信息</el-button
                >
              </el-row>
              <div>
                <el-descriptions
                  :title="data.dname"
                  class="margin-top:200px"
                  :column="3"
                  :size="large"
                  border
                >
                  <template #extra> </template>
                  <el-descriptions-item label="科室">{{
                    data.officename
                  }}</el-descriptions-item>
                  ]<el-descriptions-item label="诊室">{{
                    data.room
                  }}</el-descriptions-item>
                  <el-descriptions-item label="职务">{{
                    data.career
                  }}</el-descriptions-item>
                  <el-descriptions-item label="性别">{{
                    data.gender
                  }}</el-descriptions-item>
                  <el-descriptions-item label="年龄">{{
                    data.age
                  }}</el-descriptions-item>
                  <el-descriptions-item label="接诊次数">{{
                    data.count
                  }}</el-descriptions-item>
                  <el-descriptions-item label="费用">{{
                    data.fee
                  }}</el-descriptions-item>
                  <el-divider />
                </el-descriptions>
              </div>
            </el-card>
          </el-header>
          <div class="abc">
            <el-main>
              <h1>介绍</h1>
              <p>{{ data.description }}</p>
            </el-main>
          </div>
        </el-container>
      </el-container>
    </div>
    <div class="common-layout is-vertical" style="margin-top: 100px">
      <el-container>
        <el-header>
          <h1>当前日期为：{{ date }}</h1>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button
              :label="index.week"
              v-for="(index, item) in weeks"
              :key="item"
              @click="handleClick(index.time)"
            />
          </el-radio-group>
        </el-header>
        <el-main>
          <el-select
            v-model="value"
            class="m-2"
            placeholder="请选择预约时段"
            size="large"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            />
          </el-select>
        </el-main>
      </el-container>
    </div>
  </div>
  <Dialog
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    v-if="dialogVisible"
    @initUserList="initDatas"
    :dialogTableValue="dialogTableValue"
  />
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getWorktime, getDoctor } from '@/api/yuyue1-2.js'
import { getDoctor as getDoctor1 } from '@/api/doctor.js'
import Dialog from './components/dialog.vue'
const radio1 = ref('New York')
const weeks = ref(['周日', '周一', '周二', '周三', '周四', '周五', '周六'])

const date = ref('')

const dialogTitle = ref('')
const dialogVisible = ref(false)
const dialogTableValue = ref({})

const route = useRoute()
const data = ref([])

const initDatas = async () => {
  const a = localStorage.getItem('Doctoraccount')
  const res1 = await getDoctor1()
  let dname
  for (let i = 0; i < res1.data.total; i++) {
    if (res1.data.datas[i].account === a) {
      dname = res1.data.datas[i].dname
      break
    }
  }
  const res = await getDoctor(dname)
  data.value = res.data.datas[0]
}
initDatas()

const paddingZero = function (n) {
  if (n < 10) {
    return '0' + n
  } else {
    return n
  }
}
const getWeekDay = function () {
  const myDate = new Date()
  const year = myDate.getFullYear()
  const week = ['日', '一', '二', '三', '四', '五', '六']
  date.value =
    year +
    '-' +
    paddingZero(myDate.getMonth() + 1) +
    '-' +
    paddingZero(myDate.getDate())
  myDate.setDate(myDate.getDate() + 1)
  let dateTemp
  const timeArr = []
  let times
  for (let i = 0; i < 7; i++) {
    times =
      year +
      '-' +
      paddingZero(myDate.getMonth() + 1) +
      '-' +
      paddingZero(myDate.getDate())
    dateTemp = myDate.getDate()
    timeArr.push({ week: week[myDate.getDay()], day: dateTemp, time: times })
    myDate.setDate(myDate.getDate() + 1)
  }
  weeks.value = timeArr
}
getWeekDay()

const thisTime = ref(date.value)

const handleClick = (time) => {
  thisTime.value = time
}

const options = ref([])

const value = ref('')
const getTime = async () => {
  const res = await getWorktime(data.value.dname, thisTime.value)
  for (var i = 0; i < res.data.datas.length; i++) {
    options.value.push(res.data.datas[i].time)
  }
  console.log(options.value)
}
watch(
  () => thisTime,
  () => {
    getTime()
  },
  { deep: true }
)

const handleClick1 = () => {
  dialogTitle.value = '修改信息'
  dialogVisible.value = true
  dialogTableValue.value = {
    dname: data.value.dname,
    age: data.value.age,
    gender: data.value.gender,
    description: data.value.description,
    account: JSON.parse(localStorage.getItem('Doctoraccount'))
  }
}
</script>

<style lang="scss">
.info img {
  height: 180px;
  width: 150px;
}
.abc {
  margin-top: 100px;
  border: 1px solid;
  margin-left: 10px;
  border-color: rgb(195, 189, 189);
}
.choose-time-middle {
  width: 100%;
  height: 120rpx;
  padding: 10rpx 0 20rpx 0;
  background-color: #fff;
}
.date view {
  float: left;
  width: 14%;
  padding-top: 10rpx;
  text-align: center;
}
.date view button {
  padding: 0;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 30rpx;
  background-color: #fff;
  border-radius: 50%;
}
.date view button.active {
  background-color: #009ee6;
  color: #fff;
}
.date view button::after {
  border: none;
}
.show-date {
  width: 100%;
  text-align: center;
  padding: 50rpx 0rpx;
}
</style>